<template>
	<view class="pages">
		<view class="tabBar">
			<view :class="['itemsTOp',data.indexOf == item.id?'selectClass':'']" v-for="(item,index) in data.tableList"
				:key="index" @click="handleTab(item.id)">
				{{item.text}}
				<view class="lins" v-if="item.id == data.indexOf"></view>
			</view>
		</view>
		<block v-for="(item,index) in listData" :key="index">
			<view style="width: 100%;height: 16rpx;"></view>
			<view class="card">
				<view class="list">
					<text class="title">提现金额：</text>
					<text class="value">¥{{item.amount}}</text>
				</view>
				<view class="list">
					<text class="title">申请时间：</text>
					<text class="value">{{item.createdTime}}</text>
				</view>
				<!-- <view class="list" v-if="item.status != 0">
					<text class="title">审批时间：</text>
					<text class="value">{{item.approveTime}}</text>
				</view>
				<view class="list" v-if="item.status == 2">
					<text class="title">驳回时间：</text>
					<text class="value">{{item.rejectTime}}</text>
				</view>
				<view class="list" v-if="item.status == 2">
					<text class="title">驳回备注：</text>
					<text class="value">{{item.rejectReason}}</text>
				</view> -->
				<view class="list" v-if="item.status == 3">
					<text class="title">到账时间：</text>
					<text class="value">{{item.payedTime}}</text>
				</view>
				<view class="list">
					<text class="title">余额：</text>
					<text class="value">¥{{item.amountAfter}}</text>
				</view>
				<!-- 0-待审核,1-审核通过,2-审核驳回,3-提现成功,4-提现失败 -->
				<view class="list" v-if="item.status ==0||item.status ==1||item.status ==3||item.status ==4">
					<text class="title">状态：</text>
					<text class="value" v-if="item.status==3">已到账</text>
					<text class="value" v-if="item.status==1 || item.status==0">已发起</text>
					<text class="value" v-if="item.status == 4">提现失败</text>
				</view>
				<!-- <image src="/static/message/payment.svg" mode="" class="state_icon"></image> -->
				
				<!-- <image src="/pagesA/static/hoom/shenhe.png" mode="widthFix" class="state_icon" v-if="item.status == 0">
				</image>
				
				<image src="/pagesA/static/hoom/daozhang.png" mode="widthFix" class="state_icon" v-if="item.status == 1">
				</image>
				
				<image src="/pagesA/static/hoom/shenhepohui.png" mode="widthFix" class="state_icon" v-if="item.status == 2">
				</image>
				
				<image src="/pagesA/static/hoom/yidaozhang.png" mode="widthFix" class="state_icon" v-if="item.status == 3">
				</image> -->
				
			</view>
		</block>
		<view class="main dis" style="z-index: 9999;height: 80vh;" v-if="listData.length == 0">
			<view style="display: flex;align-items: center;justify-content: center;flex-direction: column;">
				<image src="https://hosue-omo.oss-cn-shenzhen.aliyuncs.com/assets/noData.png" mode="aspectFit" style="width: 200rpx;height: 200rpx;"></image>
				<text>暂无数据</text>
			</view>
		</view>
		<view style="width: 100%;height: 220rpx;"></view>
		<view class="bottom_box">
			<view class="add_btn" @click="handleJump">
				提交申请
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onShow,onReachBottom
	} from '@dcloudio/uni-app'
	import {withdrawPage} from './js/api.js'
	const data = reactive({
		tableList: [{
				id:0,
				text: '全部'
			},
			{
				id:1,
				text: '已发起'
			},
			// {
			// 	id:0,
			// 	text: '待审批'
			// },
			// {
			// 	id:2,
			// 	text: '审批驳回'
			// },
			{
				id:3,
				text: '已到账'
			},
		],
		indexOf: 0,
	})
	const handleJump = () => {
		uni.navigateTo({
			url: '/pagesA/cashOut/cashOut'
		})
	}
	// 提现状态:0-待审核,1-审核通过,2-审核驳回,3-提现成功,4-提现失败
	const paramsData = reactive({
		pageNum: 1,
		pageSize: 10,
		status:'',
	})
	const listData = ref([])
	const handleTab =(id) =>{
		data.indexOf = id
		paramsData.status = id
		// if(id == -1)  paramsData.status = ''
		paramsData.pageNum = 1
		getListData()
	}
	const isReach = ref(true)
	const getListData = async()=>{
		let res = await withdrawPage(paramsData)
		if(res.data.code == 0){
			console.log('res===',res)
			let list = res.data.data?.list || []
			if(paramsData.pageNum == 1){
				listData.value = list
			}else{
				listData.value = listData.value.concat(list)
			}
			if(list<10){
				isReach.value = false
			}
		}
	}
	onReachBottom(() => {
		// console.log('上拉触底')
		if (!isReach.value) return
		paramsData.pageNum++
		getListData()
	})
	onShow(()=>{
		paramsData.pageNum = 1
		getListData()
	})
</script>
<style>
	page {
		background: #F6F6F6 !important;
	}
</style>
<style lang="less" scoped>
	.tabBar {
		width: 100%;
		height: 88rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.itemsTOp {
			width: 33%;
			height: 100%;
			font-family: PingFangSC-Regular;
			font-size: 28rpx;
			color: #4E4E4E;
			text-align: center;
			line-height: 28rpx;
			font-weight: 400;
			// border: 1px solid;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;

			.lins {
				background: #EE7930;
				border-radius: 5rpx;
				width: 36rpx;
				height: 4rpx;
				position: absolute;
				bottom: 0;
			}
		}

		.selectClass {
			font-family: PingFangSC-Semibold;
			font-size: 32rpx;
			color: #333333;
			text-align: center;
			line-height: 28rpx;
			font-weight: 600;
		}
	}

	.card {
		padding: 30rpx;
		position: relative;
		background: #FFFFFF;

		.list {
			display: flex;
			align-items: center;
			font-size: 24rpx;
			font-weight: 400;

			.title {
				color: #666666;
				line-height: 26rpx;
				width: 120rpx;
				text-align: left;
			}

			.value {
				color: #000000;
				line-height: 26px;
			}

		}

		.state_icon {
			width: 120rpx;
			height: 120rpx;
			position: absolute;
			top: 30rpx;
			right: 30rpx;
		}
	}

	.bottom_box {
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 30rpx 0;
		background: #FFFFFF;
		width: 100%;

		.add_btn {
			width: 626rpx;
			height: 90rpx;
			line-height: 90rpx;
			background-image: linear-gradient(270deg, #F1B13F 0%, #F8D648 100%);
			border-radius: 50rpx;
			font-family: PingFangSC-Regular;
			font-size: 32rpx;
			color: #FFFFFF;
			text-align: center;
			font-weight: 400;
		}
	}
</style>